<template>
  <div class="boxTwo">
    <!-- 表单开始 -->
    <div>
      <el-form
        :rules="rules"
        status-icon
        ref="regForm"
        :model="regForm"
        class="regContainer"
      >
        <h3 class="title">欢迎注册</h3>
        <el-button type="text" @click="Login" style="margin-bottom: 40px"
          >已有账号？立即登录</el-button
        >
        <el-form-item prop="nickname" label="设置昵称">
          <el-input
            type="text"
            autocomplete="false"
            v-model="regForm.nickname"
            placeholder="请输入昵称"
            style="width: 320px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="电话号码">
          <el-input
            ref="focusMobile"
            type="text"
            autocomplete="false"
            v-model="regForm.mobile"
            placeholder="请输入电话号码"
            style="width: 320px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="设置密码">
          <el-input
            type="password"
            autocomplete="false"
            v-model="regForm.password"
            placeholder="请设置密码"
            style="width: 320px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="checkPass" label="重复密码">
          <el-input
            type="password"
            autocomplete="false"
            v-model="regForm.checkPass"
            placeholder="请再次输入密码"
            style="width: 320px"
          ></el-input>
        </el-form-item>

        <el-button
          type="primary"
          style="width: 100%; margin-top: 50px; border-radius: 30px"
          @click="submitRegister"
          >注册</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
import { Message } from "element-ui";

export default {
  name: "register",
  data() {
    var validateName = (rule, value, callback) => {
      var pat = /([a-zA-Z0-9]|[._-]){4,16}$/;
      if (!pat.exec(value))
        callback(new Error("昵称为4到16位（字母、数字、下划线或减号）"));
      callback();
    };
    var validatePass = (rule, value, callback) => {
      var patrn = /^([a-zA-Z0-9]|[._-]){9,16}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (!patrn.exec(value))
          callback(
            new Error(
              "1、长度在 6 到 16 个字符且不包含空格 2、不能为9位以下纯数字"
            )
          );
        // if (this.regForm.checkPass !== '') {
        //   this.$refs.regForm.validateField('checkPass');
        // }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.regForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      regForm: {
        // nickname: "suzizhan",
        // mobile: "13568387255",
        // password: "2827528315",
        // checkPass: "2827528315",
        // code: "123",
        nickname: "",
        mobile: "",
        pass: "",
        checkPass: "",
        code: "",
      },
      rules: {
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 4,
            max: 16,
            message: "昵称为4到16位（字母、数字、下划线或减号）",
            trigger: "blur",
          },
          { validator: validateName, trigger: "blur", required: true },
        ],
        mobile: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message:
              "1、长度在 6 到 16 个字符且不包含空格 2、不能为9位以下纯数字",
            trigger: "blur",
          },
          { validator: validatePass, trigger: "blur", required: true },
        ],
        checkPass: [
          { validator: validatePass2, trigger: "blur", required: true },
        ],
      },
    };
  },
  methods: {
    Login() {
      this.$router.push("/login");
    },
    submitRegister() {
      this.$refs.regForm.validate((valid) => {
        if (valid) {
          let salt = "1a2b3c4d";
          let str =
            "" +
            salt.charAt(0) +
            salt.charAt(2) +
            this.regForm.password +
            salt.charAt(5) +
            salt.charAt(4);
          //请求后端接口
          let param = new URLSearchParams();
          param.append("mobile", this.regForm.mobile);
          param.append("nickname", this.regForm.nickname);
          param.append("password", md5(str));
          this.$http({
            method: "post",
            url: "/enroll",
            data: param,
          }).then((res) => {
            if (res.message == "SUCCESS") {
              Message.success("注册成功！即将跳转到登录页面...");
              //页面跳转
              setTimeout(() => {
                this.$router.replace("/login");
              }, 2000);
            } else if (res.code === 500215) {
              Message.warning(res.message);
              this.regForm.mobile = "";
              this.regForm.code = "";
              this.$refs.focusMobile.focus();
            }else if(res.code === 500212){
              Message.warning(res.message);
              this.regForm.mobile = "";
              this.regForm.code = "";
              this.$refs.focusMobile.focus();
            }
          });
        }
      });
    },
  },
};
</script>

<style>
.boxTwo {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-image: url("http://campus.51job.com/csxbank2022/images/bj.jpg");
  /* 固定body的背景 */
  background-attachment: fixed;
  background-size: cover;
}

.regContainer {
  border-radius: 15px;
  margin: 100px auto;
  width: 400px;
  height: 500px;
  padding: 0px 35px 30px 35px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #eaeaea;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  right: 180px;
}
.title {
  text-align: left;
  font-size: 36px;
  margin: 36px 0px 0px 0px;
}
</style>